<template>
  <div>
    <el-container>
      <el-aside :width="unfold ? '50px' : '200px'">
        <div class="logo-box">
          <img
            src="../../../public/img/pic/logo/white@3x.png"
            alt=""
            class="logo"
            v-show="!unfold"
            @click="shrink"
          />
          <i class="el-icon-s-unfold" v-show="unfold" @click="shrink"></i>
        </div>
        <!-- <el-menu
          default-active="/"
          class="el-menu-vertical-demo"
          background-color="#ff5f41"
          text-color="#fff"
          mode
          :collapse="unfold"
          collapse-transition
          router
        > -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#ff5f41"
          text-color="#fff"
          :collapse="unfold"
          router
        >
          <el-submenu :index="item.id+''" v-for="item in sidebar" :key="item.id">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group  v-for="obj in item.children" :key="obj.id">
              <el-menu-item :index="obj.url">{{obj.title }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="top-left">
            <div
              :class="{ top_acti: index == topIndex }"
              v-for="(item, index) in topLeft"
              :key="index"
              @click="topActive(index)"
            >
              {{ item }}
            </div>
          </div>
          <div class="top-right">
            <span>消息</span>
            <span>记录</span>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                更多设置<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="out">退出登录</el-dropdown-item>
                <el-dropdown-item command="edit">修改信息</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="back">
            <img src="../../../public/img/icon/logged_in@3x.png" alt="" />
            admin
          </div>
        </el-header>
        <el-main> <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
 <script>
export default {
  data() {
    return {
      index: "0",
      topLeft: ["菜单管理", "角色管理", "管理员管理"],
      topIndex: "0",
      unfold: false, // 是否收缩
      sidebar: [],
    };
  },
  created() {
    this.$api.getmenulist({ istree: true }).then((res) => {
      this.sidebar = res.data.list;
      console.log(this.sidebar);
    });
  },
  mounted() {},

  methods: {
    go(index, path) {
      this.index = index;
      this.$router.push(path);
    },
    topActive(index) {
      this.topIndex = index;
    },
    shrink() {
      // 展开/收缩
      this.unfold = !this.unfold;
    },
    handleCommand(type) {
      // 更多设置
      type == "out" ? this.useRout() : this.useredit();
    },
    useRout() {
      // 退出登录
      this.$confirm("确认退出吗？")
        .then((_) => {
          localStorage.removeItem("userInfo");
          this.$router.replace("/login");
        })
        .catch((_) => {});
    },
    useredit() {
      // 修改信息
      console.log("edit");
    },
    handleOpen(key, keyPath) {   // 展开所选
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {  // 收起所选
        console.log(key, keyPath);
      }
  },
};
</script>
 
 <style lang="scss" scoped>
.el-header {
  background-color: #ffff;
  color: #333;
  // line-height: 60px;
  align-items: center;
  display: flex;
}
.top-left {
  flex: 1;
  display: flex;
  line-height: 40px;
  > div {
    width: 100px;
    height: 40px;
    color: #888;
    text-align: center;
    // padding: 10px;
    font-size: 14px;
    margin: 0 10px;
  }
  .top_acti {
    background: #ff684d;
    color: #fff;
    border-radius: 20px;
  }
}
.back {
  width: 80px;
  display: flex;
  align-items: center;
  color: #ff6040;
  margin-left: 20px;
  > img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
.top-right {
  width: 200px;
  display: flex;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
}
.el-aside {
  background-color: #ff5f41;
  color: #fff;
  height: 100vh;
}
.active {
  background: #fff;
  color: #ff6040;
}
.el-main {
  background-color: #f2f2f2;
  color: #333;
  height: calc(100vh - 60px);
}

.ul {
  margin-top: 30px;
}
.ul > li {
  width: 100%;
  height: 40px;
  // text-align: center;
  padding-left: 30px;
  line-height: 40px;
}
.logo-box {
  text-align: center;
  i {
    width: 100%;
    line-height: 40px;
    font-size: 20px;
  }
}
.logo {
  width: 80%;
  height: 40px;
  margin: 5px 20px;
}
.unfold {
  width: 100%;
  height: 40px;
  text-align: center;
  i {
    line-height: 40px;
    font-size: 20px;
  }
}
::v-deep .el-menu-item {
  text-align: center;
}
</style>